<template>
  <div>
    <div v-for="(item) in permission" :key="item.id" class="item" >
      <div class="item-title">
        <a-icon
          :style="{'visibility' : item.children && item.children.length ? 'visible' : 'hidden'}"
          class="item-title-icon"
          :type="item.isExpand ? 'caret-down' : 'caret-right'"
          theme="filled"
          @click="expandChange(item)"
        />
        <!-- :disabled="item.disabled || !isEdit || disableAll" -->

        <a-checkbox
          :checked="item.checked"
          :disabled="!isEdit"
          @change="(e) => checkChange(e.target.checked,item)"
        >
          {{ item.name }}
        </a-checkbox>
      </div>
      <!-- :disableAll="disableAll" -->
      <permissionItem
        :ref="'table_' + item.id"
        v-show="item.isExpand"
        :is-edit="isEdit"
        :padding="20"
        :permission="item.children"
        @parentSelected="parentSelected(item)"
        @parentUnSelected="parentUnSelected(item)"
        @updateChange="updateChange"
      />
    </div>
  </div>
</template>
<script>
import permissionItem from './permissionItem.vue'
export default {
  props: {
    permission: {
      default: () => {
        return []
      },
      type: Array
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    disableAll: {
      type: Boolean,
      default: false
    }
  },
  data () {
    console.log('this.disableAll', this.disableAll)
    return {
      checkedList: []
    }
  },
  components: {
    permissionItem
  },
  methods: {
    expandChange (item) {
      this.$set(item, 'isExpand', !item.isExpand)
      this.$forceUpdate()
    },
    updataView () {
      this.$forceUpdate()
      if (this.permission && this.permission.length) {
        this.permission.forEach(item => {
          if (this.$refs['table_' + item.id] !== undefined) {
            this.$refs['table_' + item.id][0].updataView()
          }
        })
      }
    },
    clearAll () {
      if (this.permission && this.permission.length) {
        this.permission.forEach(item => {
          !item.disabled && this.$set(item, 'checked', false)
          if (this.$refs['table_' + item.id] !== undefined) {
            this.$refs['table_' + item.id][0].childSelectAll(false)
          }
          this.$forceUpdate()
        })
      }
    },
    checkChange (e, item) {
      this.$set(item, 'checked', e)
      // 如果有children  下级默认全选中
      // 如果是选中 默认把上级勾选；如果未选中 并且所有平级都没选中，上级不勾选
      if (item.children && item.children.length) {
        this.$refs['table_' + item.id][0].childSelectAll(e)
      }
      this.$forceUpdate()
      this.updateChange()
    },
    updateChange () {
      // 更新checked 已选中的对象
      this.checkedList = []
      this.getCheckedData(this.permission)
      this.$emit('check', this.checkedList)
      // console.log('已选中的对象', this.checkedList.join(','))
    },
    getCheckedData (permission) {
      if (permission && permission.length) {
        permission.forEach(item => {
          if (item.checked) {
            this.checkedList.push(item.id)
          }
          if (item.child && item.child.length) {
            item.child.forEach(item1 => {
              if (item1.checked) {
                this.checkedList.push(item1.id)
              }
            })
          }
          if (item.children && item.children.length) {
            this.getCheckedData(item.children)
          }
        })
      }
    },
    parentSelected (item) {
      this.$set(item, 'checked', true)
      this.$forceUpdate()
    },
    parentUnSelected (item) {
      this.$set(item, 'checked', false)
      this.$forceUpdate()
    }
  }

}
</script>
<style lang="less" scoped>
  .item{
    border-bottom: 1px solid #fafafa;
    &-title{
      display: flex;
      align-items: center;
      background: #E5EBF3;
      padding: 10px;
      &-icon{
        font-size: 16px;
        margin-right: 10px;
        cursor: pointer;
      }
    }

  }
</style>
